<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/otherFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="otherFunctionDemo">
	<!-- Demo区 -->
	<div title='服务器端排序个性化/全屏' tabid='tab1'>
        <span class="showClew">
        	备注：1.IGrid的服务器端排序个性化的应用，前提是在服务器端排序开启的情况下 ，还需配置后台的服务器端排序的SQL查询语句一同使用<br>
        	2.IGrid的全屏的应用<br>2.只有开启个性化，列顺序和改变列宽，才会进行保存
        </span><br><br>
    	<form id="fmiStudent" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btniStudentSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-form-body">
			<ul>
				<li class="ccay-form-row">
					<samp class="i18n" i18nKey="ccay.common.label.profilehistory"></samp>
					<span class="ccay-form-input"><input type="text" id="aaa"/></span>	
				</li>
			</ul>
		</div>		
		<div id="fsiStudent">
			<div class="ccay-grid">
				<div id="tbriStudent" class="ccay-grid-toolbar">
					<span id="btniStudentDel" class="ccay-button" >
						<a class="ccay-icon pre-del"></a>
						<label>delete</label>
					</span>
					<span id="btniStudentUndoDel" class="ccay-button" >
						<a class="ccay-icon undel"></a>
						<label>undo delete</label>
					</span>
					<span id="btniStudentAdd" class="ccay-button" >
						<a class="ccay-icon add"></a>
						<label>insert</label>
					</span>
					<span id="btniStudentSave" class="ccay-button" >
						<a class="ccay-icon save"></a>
						<label>save</label>
					</span>
			 	</div>
			 	<div id="grdiStudent"></div>
			</div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;form id="fmigridDemo" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnigridDemoSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>

&lt;!-- 个性化设置历史  -->
&lt;div class="ccay-form-body">
	&lt;ul>
		&lt;li class="ccay-form-row">
			&lt;samp class="i18n" i18nKey="ccay.common.label.profilehistory">&lt;/samp>
			&lt;span class="ccay-form-input">&lt;input type="text" id="panel"/>&lt;/span>	
		&lt;/li>
	&lt;/ul>
&lt;/div>

&lt;!-- 将需要全屏的容器包起来  -->
&lt;div id="fsigridDemo">
	&lt;div id="tbrigridDemo" class="ccay-grid-toolbar">
		&lt;span id="btnigridDemoDel" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoUndoDel" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoAdd" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoSave" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
 	&lt;/div>
 	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
var linkBtns = [
	{text: "${id}", click: Ccay.example.ui.igird.managerFunction.operateTest}
];
var gridOption = {
	//<span class="showClew"> 设置最小高度</span>
	minHeight: 200,
	
	//<span class="showClew"> 设置最大高度</span>
	maxHeight: 500,
	editMode: true,
	wrapHead: false,
	
	//<span class="showClew"> 开启个性化设置</span>
	customSetting: true,
	
	//<span class="showClew"> 设置工具栏容器</span>
	toolPanel: "#tbrigridDemo",
	
	//<span class="showClew"> 设置全屏容器</span>
	fullPanel: "#fsigridDemo",
	//<span class="showClew"> 开启个性化设置历史</span>
	profileOpen:true,
	//<span class="showClew"> 设置个性化历史容器</span>
	profileSelectPanel:"#panel",
    columns: [
    	{columnType: 'select'},
		{columnType: 'operate', width: 70, freezeable: true, btns:linkBtns},
		{field: 'name', width:90, header: "ccay.common.label.name", freezeable: true, rule: {required: true}},
		//<span class="showClew">第一个参数是igridId，第二个参数是当前列field</span>
		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true},cssName:"center",editable:false,content:"${#Ccay.Format.boolRender('igridDemo',sex)}"},
		
		//<span class="showClew"> sort: "asc"设置该列的排序方式</span>
		{field: 'age', width:70, header: "sAge", type: 'integer', sort: "asc"},
		{field: 'birthday', width:110, header: "sBirthday", type: 'date', hidden: true},
		{field: 'blog', width:200, header: "sBlog", showTip:true},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
    
    //<span class="showClew"> url地址必须使用服务器端排序的方式</span>
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	search: {
    		btn: '#btnigridDemoSearch',
			panel: '#fmigridDemo'
    	},
    	del: {
    		btn: '#btnigridDemoDel',
    		undoBtn: '#btnigridDemoUndoDel'
    	},
    	insert: {
    		btn: '#btnigridDemoAdd',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnigridDemoSave',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};
$("#igridDemo").igrid(gridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#otherFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>	
    </div>
    
    <div title='行合并个性化/全屏' tabid='tab2'>
        <span class="showClew">
        	备注：1.IGrid的行合并个性化的应用，前提是在服务器端排序开启的情况下 ，还需配置后台的服务器端排序的SQL查询语句一同使用<br>
        	2.IGrid的全屏的应用
        </span><br><br>
    	<form id="fmRowSpan" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnRowSpanSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid">
			<div id="fsRowSpan">
				<div id="tbrRowSpan" class="ccay-grid-toolbar">
					<span id="btnRowSpanDel" class="ccay-button" >
						<a class="ccay-icon pre-del"></a>
						<label>delete</label>
					</span>
					<span id="btnRowSpanUndoDel" class="ccay-button" >
						<a class="ccay-icon undel"></a>
						<label>undo delete</label>
					</span>
					<span id="btnRowSpanAdd" class="ccay-button" >
						<a class="ccay-icon add"></a>
						<label>insert</label>
					</span>
					<span id="btnRowSpanSave" class="ccay-button" >
						<a class="ccay-icon save"></a>
						<label>save</label>
					</span>
			 	</div>
			 	<div id="grdRowSpan"></div>
			</div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html2'>
&lt;form id="fmigridDemo" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnigridDemoSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>
&lt;!-- 将需要全屏的容器包起来  -->
&lt;div id="fsigridDemo">
	&lt;div id="tbrigridDemo" class="ccay-grid-toolbar">
		&lt;span id="btnigridDemoDel" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoUndoDel" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoAdd" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoSave" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
 	&lt;/div>
 	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
var linkBtns = [
	{text: "${id}", click: Ccay.example.ui.igird.managerFunction.operateTest}
];
var gridOption = {
	//<span class="showClew"> 设置最小高度</span>
	minHeight: 200,
	
	//<span class="showClew"> 设置最大高度</span>
	maxHeight: 500,
	editMode: true,
	wrapHead: false,
	
	//<span class="showClew"> 开启个性化设置</span>
	customSetting: true,
	
	//<span class="showClew"> 设置工具栏容器</span>
	toolPanel: "#tbrigridDemo",
	
	//<span class="showClew"> 设置全屏容器</span>
	fullPanel: "#fsigridDemo",
	
	//<span class="showClew"> 设置行渲染类型</span>
	rowRender: "rowSpan",
	
	//<span class="showClew"> 设置行渲染参数</span>
	rowRenderOp: {
		simpleSort: true, 
		
		//<span class="showClew"> 设置行渲染的候选字段</span>
		spareFields: ["sex", "birthday", "lastUpdateDate"],
		
		//<span class="showClew"> 设置行渲染的优先级</span> 
		order: ["blog", "age"]
	},
    columns: [
    	{columnType: 'select', multi:true},
		{columnType: 'operate', width: 70, freezeable: true, btns:linkBtns},
		{field: 'name', width:90, header: "ccay.common.label.name", freezeable: true, rule: {required: true}},
		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		{field: 'age', width:70, header: "sAge", type: 'integer'},
		{field: 'birthday', width:110, header: "sBirthday", type: 'date', hidden: true},
		{field: 'blog', width:200, header: "sBlog", showTip:true},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	search: {
    		btn: '#btnigridDemoSearch',
			panel: '#fmigridDemo'
    	},
    	del: {
    		btn: '#btnigridDemoDel',
    		undoBtn: '#btnigridDemoUndoDel'
    	},
    	insert: {
    		btn: '#btnigridDemoAdd',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnigridDemoSave',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};
$("#igridDemo").igrid(gridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#otherFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>	
    </div>
    
    <div title='行分组个性化/全屏' tabid='tab3'>
        <span class="showClew">
        	备注：1.IGrid的行分组个性化的应用，前提是在服务器端排序开启的情况下 ，还需配置后台的服务器端排序的SQL查询语句一同使用<br>
        	2.IGrid的全屏的应用
		</span><br><br>
    	<form id="fmGroup" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnGroupSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid">
			<div id="fsGroup">
				<div id="tbrGroup" class="ccay-grid-toolbar">
					<span id="btnGroupDel" class="ccay-button" >
						<a class="ccay-icon pre-del"></a>
						<label>delete</label>
					</span>
					<span id="btnGroupUndoDel" class="ccay-button" >
						<a class="ccay-icon undel"></a>
						<label>undo delete</label>
					</span>
					<span id="btnGroupAdd" class="ccay-button" >
						<a class="ccay-icon add"></a>
						<label>insert</label>
					</span>
					<span id="btnGroupSave" class="ccay-button" >
						<a class="ccay-icon save"></a>
						<label>save</label>
					</span>
			 	</div>
			 	<div id="grdGroup"></div>
			</div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html3'>
&lt;form id="fmigridDemo" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnigridDemoSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>
&lt;!-- 将需要全屏的容器包起来  -->
&lt;div id="fsigridDemo">
	&lt;div id="tbrigridDemo" class="ccay-grid-toolbar">
		&lt;span id="btnigridDemoDel" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoUndoDel" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoAdd" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoSave" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
 	&lt;/div>
 	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js3'>
var linkBtns = [
	{text: "${id}", click: Ccay.example.ui.igird.managerFunction.operateTest}
];
var gridOption = {
	//<span class="showClew"> 设置最小高度</span>
	minHeight: 200,
	
	//<span class="showClew"> 设置最大高度</span>
	maxHeight: 500,
	editMode: true,
	wrapHead: false,
	
	//<span class="showClew"> 开启个性化设置</span>
	customSetting: true,
	
	//<span class="showClew"> 设置工具栏容器</span>
	toolPanel: "#tbrigridDemo",
	
	//<span class="showClew"> 设置全屏容器</span>
	fullPanel: "#fsigridDemo",
	rowRender: "group",
	rowRenderOp: {
		spareFields: ["sex", "birthday", "lastUpdateDate"]
	},
    columns: [
    	{columnType: 'select', multi: true},
    	{columnType: 'operate', width: 70, freezeable: true, btns: linkBtns},
 		{field: 'name', width: 90, header: "ccay.common.label.name", freezeable: true, rule: {required: true}},
 		{field: 'sex', width: 70, header: "sSex", type: 'bool', format: {isIcon: true}},
 		{field: 'age', width: 70, header: "sAge", type: 'integer', hidden: true},
 		{field: 'birthday', width: 110, header: "sBirthday", type: 'date'},
 		{field: 'blog', width: 200, header: "sBlog", showTip:true, group: true},
 		{field: 'lastUpdateDate', width: 130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	search: {
    		btn: '#btnigridDemoSearch',
			panel: '#fmigridDemo'
    	},
    	del: {
    		btn: '#btnigridDemoDel',
    		undoBtn: '#btnigridDemoUndoDel'
    	},
    	insert: {
    		btn: '#btnigridDemoAdd',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnigridDemoSave',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};
$("#igridDemo").igrid(gridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#otherFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>	
    </div>
    
    <div title='滚动加载全屏' tabid='tab4'>
        <span class="showClew">备注：IGrid的滚动加载模式的全屏应用</span><br><br>
    	<form id="fmiStudent02" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btniStudent02Search" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid">
			<div id="fsiStudent02">
				<div id="tbriStudent02" class="ccay-grid-toolbar">
					<span id="btniStudent02Del" class="ccay-button" >
						<a class="ccay-icon pre-del"></a>
						<label>delete</label>
					</span>
					<span id="btniStudent02UndoDel" class="ccay-button" >
						<a class="ccay-icon undel"></a>
						<label>undo delete</label>
					</span>
					<span id="btniStudent02Add" class="ccay-button" >
						<a class="ccay-icon add"></a>
						<label>insert</label>
					</span>
					<span id="btniStudent02Save" class="ccay-button" >
						<a class="ccay-icon save"></a>
						<label>save</label>
					</span>
			 	</div>
			 	<div id="iStudent02"></div>
			</div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html4'>
&lt;form id="fmigridDemo2" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnigridDemo2Search" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>
&lt;!-- 将需要全屏的容器包起来  -->
&lt;div id="fsigridDemo2">
	&lt;div id="tbrigridDemo2" class="ccay-grid-toolbar">
		&lt;span id="btnigridDemo2Del" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemo2UndoDel" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemo2Add" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemo2Save" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
 	&lt;/div>
 	&lt;div id="igridDemo2">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js4'>
//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};

var gridOption3 = {
	height: 300,
	editMode: true,
	lazyLoad: true,
	fullPanel: "fsigridDemo2",
	columns: [
		{columnType: "select", multi: true},
		{field: 'id', width: 100, header: 'id', editable: false},
		{field: 'name', width:100, header: "name", rule: {required: true}},
		{field: 'description', width:200, header: "description"}
	],
    ajax: {
    	url: 'services/ccay/demo/grid/list/ranged/${start}/${end}/${orderBy}/${total}'
    },
    operation: {
    	search: {
    		btn: '#btnigridDemo2Search',
			panel: '#fmigridDemo2'
    	},
    	del: {
    		btn: '#btnigridDemo2Del',
    		undoBtn: '#btnigridDemo2UndoDel'
    	},
    	insert: {
    		btn: '#btnigridDemo2Add',
    		copy: true,
    		clear: ['id']
    	},
    	save: {
    		btn: '#btnigridDemo2Save',
    		ajax: {
    			url: "services/ccay/demo/grid/batch"
    		}
    	}
    }
};
$("#igridDemo2").igrid(gridOption3);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#otherFunctionDemo',$('#js4').html(),$('#html4').html())">亲自试一试</a>
		</div>	
    </div>
    
    <!-- Try区 -->
	 <div title="试一试" tabid="trytab">
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:300px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:300px; width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>